<template>
	<h1 ref="app">app</h1>
	<p>{{ num }}</p>
	<button @click="update1">update1</button>
	<p>{{ person.age }}</p>
	<Child :age="person.age" @setAge="person.age++" />
</template>

<script setup>
import {
	reactive,
	// readonly,
	ref,
	// watch,
	// computed,
	onMounted,
	// onBeforeUnmount,
} from "vue";
import Child from "./Child.vue";

const num = ref(0);
const app = ref(null);

console.log(app);

onMounted(() => {
	console.log(app.value);
});

const person = reactive({
	age: 58,
});

const update1 = () => {
	num.value++;
};
</script>

<style></style>
